<template>
  <div class="foregoer_details">
    <div class="foregoer_title">
      <p style="margin-right: 20px">{{routerName}}</p>
    </div>
    <div class="foregoer_section">
      <div class="foregoer_section_nav">简介</div>
      <div class="foregoer_section_img">
        <img :src="teacherData.img" alt="" />
        <div class="foregoer_section_text">
          <p>{{teacherData.name}}</p>
          <p>类型：<span v-for="item in teacherData.types" :key="item">{{item}}</span></p>
          <p>职位：{{teacherData.position}}</p>
        </div>
      </div>
      <div class="foregoer_description" v-html="teacherData.content"></div>
    </div>
  </div>
</template>

<script>
import { findTeacherById } from "@/api/teacher";
export default {
  name: "foregoerDetails",
  data() {
    return {
      teacherData: {},
      routerName: ''
    };
  },
  created() {
    this.routerName = this.$route.query.routerName
  },
  mounted() {
    this.findTeacherById();
  },
  methods: {
    findTeacherById() {
      findTeacherById(this.$route.query.teacherId).then((response) => {
          if (response.data.code === 20000) {
          this.teacherData = response.data.results
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.foregoer_details {
  .foregoer_title {
    height: 40px;
    background: #f1f1f1;
    text-align: right;
    line-height: 40px;
    font-weight: bold;
    font-size: 21px;
    color: #0a7b19;
  }

  .foregoer_section {
    padding: 20px 0;

    &:last-child {
      margin-bottom: 30px;
    }

    .foregoer_section_nav {
      border-left: 3px solid #0a7b19;
      font-weight: bold;
      padding-left: 10px;
    }

    .foregoer_section_img {
      display: flex;
      margin-top: 16px;

      img {
        width: 120px;
        height: 160px;
        background-color: #f1f1f1;
      }

      .foregoer_section_text {
        margin-left: 16px;

        p {
          margin-top: 20px;

          &:first-child {
            font-weight: bold;
          }
        }
      }
    }

    .foregoer_description {
      margin-top: 16px;
      line-height: 24px;
    }
  }
}
</style>
